<template>
	<view>
		<view class="head">
			<u-icon @click="returnButton()" name="arrow-left" color="#fff" size="30"></u-icon>
			<u-text text="确认订单" color="#fff" size="22" align="center" margin="4vh 0px 0px 0px"></u-text>
		</view>
		<view class="head-2">
		</view>
		<view class="content">
			<view>
				<u-steps :current="1">
					<u-steps-item title="预约服务"></u-steps-item>
					<u-steps-item title="支付订单"></u-steps-item>
					<u-steps-item title="门店服务">
					</u-steps-item>
				</u-steps>
				<view style="border: 2px solid #e2e2e2;margin-top: 20rpx;"></view>
			</view>
			<view style="display: flex;width: 100%;justify-content: space-between;margin-top: 30rpx;">
				<view style="display: flex; align-items: center;">
					<image src="@/static/images/ls/商家@3x.png" style="width: 8vw;height: 8vw;margin-right: 20rpx;">
					</image>
					<view>
						<u-text :text="item.item.storeName" bold></u-text>
						<u-text :text="item.item.address" size="14" color="#7c7c7c"></u-text>
					</view>
				</view>
				<view>
				</view>
			</view>

			<view
				style="display: flex;width: 100%;justify-content: space-between;margin-top: 30rpx;align-items: center;">
				<view style="display: flex; align-items: center;">
					<image src="@/static/images/ls/人员@3x.png" style="width: 8vw;height: 8vw;margin-right: 20rpx;">
					</image>
					<view>
						<u-text :text="user.realName" bold></u-text>
					</view>
				</view>
				<view>
					<u-text :text="user.phone" size="14" color="#7c7c7c"></u-text>
				</view>
			</view>


			<view
				style="display: flex;width: 100%;justify-content: space-between;margin-top: 30rpx;align-items: center;">
				<!-- <view style="display: flex; align-items: center;">
					<image src="@/static/images/ls/车辆-01@3x.png" style="width: 8vw;height: 8vw;margin-right: 20rpx;">
					</image>
					<view>
						<u-text text="立即预约" bold></u-text>
					</view>
				</view> -->
				<!-- <view style="display: flex;align-items: center;">
					<image src="@/static/images/ls/收起箭头小 拷贝@3x.png" style="width: 3vw;height: 5vw;">
				</view> -->
			</view>

			<view
				style="display: flex;width: 100%;justify-content: space-between;margin-top: 30rpx;align-items: center;">
				<view style="display: flex; align-items: center;">
					<image src="@/static/images/ls/车辆-01@3x(1).png" style="width: 8vw;height: 8vw;margin-right: 20rpx;">
					</image>
					<view>
						<u-text :text="item.carNumber ? item.carNumber : '请选择车辆'" bold></u-text>
					</view>
				</view>
				<view style="display: flex;align-items: center;">
					<image src="@/static/images/ls/收起箭头小 拷贝@3x.png" style="width: 3vw;height: 5vw;" @click="more_card">
				</view>
			</view>
			<view style="border: 1px solid #e2e2e2;margin-top: 30rpx;"></view>
			<view style="margin-top: 30rpx;">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<text style="font-size: 32rpx;font-weight: bold;">服务产品</text>
					<view>
						<text>您选择</text>
						<!-- <text style="color: #3183FB;">项</text> -->
						<text>的服务产品</text>
					</view>
				</view>
				<view style="margin-top: 30rpx;">
					<text style="font-size: 32rpx;font-weight: bold;">{{item.selectedService.intro}}</text>
					<text
						style="color: red;font-size: 32rpx;font-weight: bold;">{{item.selectedService.newPrice}}</text>
				</view>

				<view style="border: 1px solid #e2e2e2;margin-top: 30rpx;"></view>
			</view>
			<view style="margin-top: 30rpx;" @click="coupons">
				<view
					style="display: flex;width: 100%;justify-content: space-between;margin-top: 30rpx;align-items: center;">
					<view style="display: flex; align-items: center;">
						<image src="@/static/images/ls/车辆-01@3x.png"
							style="width: 8vw;height: 8vw;margin-right: 20rpx;">
						</image>
						<view>

							<u-text :text="item.name ? item.name : '请选择优惠券'" bold></u-text>
						</view>
					</view>
					<view style="display: flex;align-items: center;">
						<text style="font-size: 32rpx;color: red;font-weight: bold;margin-right: 20rpx;"
							v-if="item.reduce">-{{item.reduce}}元</text>
						<image src="@/static/images/ls/收起箭头小 拷贝@3x.png" style="width: 3vw;height: 5vw;">
					</view>
				</view>
			</view>


		</view>

		<view class="bottom">

			<view style="display: flex;align-items: center;" @click="show = true">
				<image src="@/static/images/ls/客服@3x.png" style="width: 10vw;height: 10vw;margin-right: 10rpx;"></image>
				<text style="font-size: 36rpx;">联系客服</text>
			</view>
			<view style="display: flex;align-items: center;">
				<text style="color: red; font-size: 36rpx; font-weight: bold;">
					合计:
					￥{{ item.reduce ? (item.selectedService.newPrice - item.reduce) : item.selectedService.newPrice }}
				</text>

				<view @click="confirm"
					style="background-color: #3183FB; text-align: center;width: 25vw;height:6vh; font-size: 36rpx;color: aliceblue;line-height: 6vh;border-radius: 45rpx;margin-left: 10rpx;">
					提交订单</view>
			</view>

		</view>
		<view style="height: 22vh;">
		</view>
		<u-action-sheet @select="show=false" :actions="list" :closeOnClickOverlay="true" :closeOnClickAction="true"
			:show="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				userId: 0,
				item: [],
				list: [{
						name: '13633990224'
					},
					{
						name: '复制'
					},
					{
						name: '取消拨号'
					}
				],
				show: false,
			}
		},
		onLoad(e) {
			this.userId = uni.getStorageSync("user_id")
			this.item = JSON.parse(decodeURIComponent(e.item));
			console.log(this.item)
			this.userInformation();
		},
		methods: {
			coupons() {
				uni.$u.route(`/pages/lzx/coupon?item=${encodeURIComponent(JSON.stringify(this.item))}`);
			},
			returnButton() {
				uni.$u.route('/pages/ls/carWash/carWash');
			},
			confirm() {
				const datas = {
					title: this.item.selectedService.name,
					type: 0,
					money: this.item.reduce ?
						(this.item.selectedService.newPrice - this.item.reduce) : this.item.selectedService.newPrice,
					drawalId: this.item.id,
					orderId: 2, // 修正 orderId 的语法错误
				};
				console.log(datas)
				this.$http({
					url: "/api/shanghuliebiao2/statement",
					method: "POST",
					data: datas,
					success: (res) => {
						if (res.data.code === 200) { // 判断返回结果是否成功
							console.log("请求成功:", res.data);
							// 可以在这里执行进一步逻辑，例如页面跳转或提示
							uni.$u.route('/pages/lzx/orderPayment');

						} else {
							console.error("请求失败:", res.data.message);
						}
					},
					fail: (err) => {
						console.error("请求错误:", err);
					},
				});
			},
			more_card() {
				uni.$u.route(`/pages/lzx/vehicle?item=${encodeURIComponent(JSON.stringify(this.item))}`);
			},
			userInformation() {
				let that = this;
				console.log(this.userId)
				this.$http({
					url: '/api/user/users/' + this.userId,
					method: 'GET',
					success(res) {
						console.log(res);
						if (res.data.code == 200) {
							that.user = res.data.data;
						}
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.head-2 {
		position: absolute;
		background-color: #3183FB;
		width: 100%;
		height: 250px;
		overflow: auto;
		z-index: 0;
	}

	.head {
		position: fixed;
		background-color: #3183FB;
		width: 100%;
		height: 80px;
		overflow: auto;
		z-index: 3;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.bottom {
		background-color: white;
		width: 100%;
		height: 10vh;
		position: fixed;
		bottom: 0vh;
		padding: 0 5vw;
		box-sizing: border-box;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 3vh;
	}

	.content {
		// height: 85vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: white;
		width: 90vw;
		margin: 0 auto;
		margin-bottom: 2vh;
		transform: translateY(12vh);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
	}
</style>